import { defineStore } from 'pinia'
import { getContrastColor } from '@/utils/tool'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const themeStore = defineStore('theme', {
  state: (): any => {
    return {
      checked: true,
      tabColor: '#1177ff',
      themeColor: '#1177ff',
      leftBackColor: '#ffffff', //设置文字颜色，命名规则：leftBackColor + Text
      leftBackColorText: '#000000',
      topBackColor: '#ffffff',
      topBackColorText: '#000000',
      bottomBackColor: '#80808019',
      backColor: '#ffffff',
      backColorText: '#000000',
      needSetColors: ['leftBackColor', 'topBackColor', 'backColor'],
      avatar: '/src/assets/images/avatar.gif',
    }
  },
  // 所有数据持久化
  persist: true,
  actions: {
    changeStyle(customCssVariableName: string, color: string) {
      document.documentElement.style.setProperty(customCssVariableName, color)
    },
    setColor(color: string, type: string) {
      this[type] = color
      this.changeStyle('--' + type, color)
      if (this.needSetColors.includes(type)) {
        const colorName = type + 'Text'
        const textColor = getContrastColor(color)
        this.changeStyle('--' + colorName, textColor)
        this[colorName] = textColor
      }
    },
    setTextColor(color: string) {
      this.leftTextColor = color
    },
    initColor() {
      this.tabColor = '#1177ff'
      this.themeColor = '#1177ff'
      this.leftBackColor = '#ffffff'
      this.topBackColor = '#ffffff'
      this.leftBackColorText = '#000000'
      this.topBackColorText = '#000000'
      this.bottomBackColor = '#80808019'
      this.backColor = '#ffffff'
      this.backColorText = '#000000'
      this.checked = true
    },
  },
  getters: {},
})

export default themeStore
